{% extends "base.html" %} {% block head %} {{ super() }}

<script src="{{url_for('static', filename='../static/js/ztable.js')}}"
	type="text/javascript" charset="utf-8"></script>
<script
	src="{{url_for('static', filename='../static/js/zmultipages.js')}}"
	type="text/javascript" charset="utf-8"></script>
<script src="{{url_for('static', filename='../static/js/zui.js')}}"
	type="text/javascript" charset="utf-8"></script>

<script>
		$(document).ready(function() {
		
			imgUploader = $("#image-loader").ZImageUploader({url:'/preload_image/house'});
		
			function readURL(input) {
				if (input.files && input.files[0]) {
					var reader = new FileReader();

					reader.onload = function(e) {
						$('#image-preview').attr('src', e.target.result);
					}

					reader.readAsDataURL(input.files[0]);
				}
			}

			$("#image-input").change(function() {
				readURL(this);
			});

			$("#image-del-btn").click(function() {
				$("#image-input").files = null;
				$('#image-preview').attr('src', '../static/images/0001/live.jpg');
			});
			

			
			function load_Property($Property){
				//Set value to submit form
				/*
				if ($Property != ''){
					$('#property-description').val($Property.attr('description'));
					$('#property-name').val($Property.find('td[name="property-name"]').text());
					$('#price').val($Property.find('td[name="property-price"]').text());
					$('#quantity').val($Property.find('td[name="property-quantity"]').text());
					
					if( $Property.attr('Property_type') == '0')
						$('#property-type').val("Property");
					else
						$('#property-type').val("Service");
					
					id = $Property.find('input[name="select-Property"]').val()
					$('input[name="property-id"]').val(id);
					$('input[name="property-action"]').val('edit-Property');
					
					picture_path = '../' + $Property.attr('picture_path')
					$("#image-preview").attr('src', picture_path);
				}
				*/
			}
			
			table = $('#my-property-ads-table').ZTable({load_callback:load_Property});
			oForm = $('#property-form').ZMultiPages();
			oTab = $('#property-ad-tabs').ZTab();
			
			//Initialize the page
			oForm.getPage(0).show();
			
			//Get init value from backend
			var ad_type = "{{ad_type}}";
			
			//Set default active tab menu
			oTab.setActive($('li.z-tab[value="' + ad_type + '"]'));
			setPropertyFormAction(ad_type);
			
			// Set tab menu click handlers
			$('li.z-tab[value="rent"]').click(function(){
				oTab.setActive($(this));
				setPropertyFormAction('rent');
				ad_type = 'rent';
				setFields();
			});

			$('li.z-tab[value="sell"]').click(function(){
				oTab.setActive($(this));
				setPropertyFormAction('sell');
				ad_type = 'sell';
				setFields();
			});
			
			// Setup form hidden fields
			page = oForm.getPage(0);
			if(ad_type=='sell'){
				//Remove option 'room'
				page.find('#property-style option[value="room"]').remove();
			}
			
			function setFields(){
				page = form.getPage(0);
				if(ad_type=='sell'){
					//Remove option 'room'
					page.find('#property-style option[value="room"]').remove();
					
					style = $('#property-style').val();
					page.find('.for-rent').hide();
					
					if(style=='apartment'){
						page.find('.for-multiple').show();
						page.find('.for-house').hide();
						page.find('.for-condo').show();
						page.find('.for-room').hide();
					}else{
						page.find('.for-multiple').show();
						page.find('.for-house').show();
						page.find('.for-condo').hide();
						page.find('.for-room').hide();
					}
					
				}else{ //ad_type == 'rent'
					// Add option 'room' if not exist
					if(page.find('#property-style option[value="room"]').length == 0)
						page.find('#property-style option:last').after('<option value="room">{{'Room'}}</option>');
					
					style = $('#property-style').val();
					page.find('.for-rent').show();
					if(style=='room'){
						page.find('.for-multiple').hide();
						page.find('.for-house').hide();
						page.find('.for-condo').show();
						page.find('.for-room').show();
					}else if(style=='apartment'){
						page.find('.for-multiple').show();
						page.find('.for-house').hide();
						page.find('.for-condo').show();
						page.find('.for-room').hide();
					}else{
						page.find('.for-condo').hide();
						page.find('.for-house').show();
						page.find('.for-multiple').show();
					}
				}
			}
			
			function setPropertyFormAction(ad_type){
			//Set the action attribute for form submit
			//Arguments:
			//	ad_type --- string type, 'rent', 'sell'
				$("#property-form").attr('action',"/manage_property_ads/" + ad_type);
			}
			
			$('#ad-type').change(setFields);
			$('#property-style').change(setFields);
			
			//Click edit button
			$('input[name="edit-Property"]').click(function(){
				$selected = table.getHighlightedRow();
				load_Property($selected);

				$('div.property-form-title > h3').text('Edit Property')
				if ($('#add-property-form').is(':hidden'))
					$('#add-property-form').show(300);
			});
			
			//Click add button
			$('input[name="add-Property"]').click(function(){
				$('input[name="property-action"]').val('add-Property');

				$('div.property-form-title > h3').text('Post new Property')

				if ($('#add-property-form').is(':hidden'))
					$('#add-property-form').show(300);
			});
			
			$('input[name="select-Property"]:checked').click(function(){
				$(this).prop('checked', false);	
			});
					
			$('#add-property-form').hide();
			
		});
	</script>
{% endblock %} {% block content %}
<ul id="property-ad-tabs" class="nav nav-tabs z-tabs">
	{% if action == 'manage' %}
	<li class="z-tab" value='rent'><a>{{'Rental'}}</a></li>
	<li class="z-tab" value='sell'><a>{{'Sell'}}</a></li> {% elif action ==
	'post' and ad_type == 'rent' %}
	<li class="z-tab active" value='rent'><a>{{'Rental'}}</a></li> {% elif
	action == 'post' and ad_type == 'sell' %}
	<li class="z-tab active" value='sell'><a>{{'Sell'}}</a></li> {% endif
	%}
</ul>

<br />

{% if action == 'manage' %}
<div id="property-ads-panel" class="panel panel-default col-md-12">
	<form id="property-ads-form" action="/delete_properties" method="post">

		<div class="panel-body">
			<div class="col-md-6">
				<h3>Manage properties</h3>
			</div>

			{% if ads !=None %}
			<div class="btn-toolbar col-md-6" style="padding-top: 18px;">
				<input type="button" class="btn btn-primary col-md-3"
					name="add-Property" value="Add" /> <input type="button"
					class="btn btn-primary col-md-3 col-md-offset-1"
					name="edit-Property" value="Edit" />
				<button type="submit"
					class="submit btn btn-primary col-md-3 col-md-offset-1"
					name="delete-Property">Delete</button>
			</div>

			<div>
				{% for ad in ads %} {% set ad = info %} {% set item = info.item %}
				<table id="property-ads-table" class="properties-content table"
					mode="normal" style="height: 200px; overflow: auto;">
					<thead>
						<tr>
							<td><input type="checkbox"></td>
							<th>Street</th>
							<th>Price</th>
							<th>Want</th>
							<th>Style</th>
							<th>Post Date</th>
						</tr>
					</thead>
					<tbody>

						<tr description="{{ item.description }}" ad_type="{{ ad.type }}">
							<td><input type="checkbox" name="selected"
								value="{{ ad.id }}"></td>
							<td name="property-street">{{item.address.street_no}} + ' '
								+ {{item.address.street_name}}</td>
							<td name="property-price">{{item.price}}</td>
							<td name="property-style">{{item.style}}</td>
							<td name="property-created">{{ad.created}}</td>
						</tr>

					</tbody>
				</table>
				{% endfor %}
			</div>

			<br />
			<p>Rows 1-10 of 48</p>
			{% endif %}
		</div>
		<!-- end of panel-body -->

	</form>
</div>
{% endif %}


<div class="col-md-12">
	<form id="property-form" enctype="multipart/form-data"
		action="/manage_property_ads" method="post">

		<div id="basic-info" class="z-page" value="1" style="display: none;">

			<div class="z-title col-md-8">
				<h3>Step1: Basic Information</h3>
			</div>
			<div class="form-left-side col-md-6">

				<div class="row form-group">
					<div class="col-md-7">
						<select class="form-control col-md-6" id="property-style"
							name="style">
							<option value="single-house">{{'Single house'}}</option>
							<option value="semi-detached">{{'Semi detach'}}</option>
							<option value="town-house">{{'Town house'}}</option>
							<option value="bangalow">{{'Bangalow'}}</option>
							<option value="apartment">{{'Apartment'}}</option>
							<option value="room">{{'Room'}}</option>
						</select>
					</div>
					<div class="col-md-4">Property style</div>
				</div>


				<!-- Year -->
				<div class="row form-group">
					<div class="col-md-7">
						<input class="form-control" type="text" name="year"
							placeholder="Year" />
					</div>
					<div class="col-md-4">When it built? (YYYY)</div>
				</div>

				<!-- Unit -->
				<div class="row form-group">
					<div class="col-md-7">
						<input class="form-control" type="text" name="unit"
							placeholder="Unit #" />
					</div>
					<div class="col-md-4">Unit #</div>
				</div>

				<!-- Street NO. -->
				<div class="row form-group">
					<div class="col-md-7">
						<input class="form-control" type="text" name="street-no"
							placeholder="Street no." />
					</div>
					<div class="col-md-4">Street no.</div>
				</div>

				<!-- Street Name -->
				<div class="row form-group">
					<div class="col-md-7">
						<input class="form-control" type="text" name="street-name"
							placeholder="Street name" />
					</div>
					<div class="col-md-4">Enter the Street name</div>
				</div>

				<!-- Postal code -->
				<div class="row form-group">
					<div class="col-md-7">
						<input class="form-control" type="text" name="postcode"
							placeholder="Postcode" />
					</div>
					<div class="col-md-4">Enter the postcode</div>
				</div>

				<!-- Lots -->
				<div class="row form-group">
					<div class="col-md-7">
						<input class="form-control" type="text" name="lots"
							placeholder="Lots" />
					</div>
					<div class="col-md-4">Enter the Lots</div>
				</div>

				<!---
				<div class="row form-group">
					<div class="col-md-7">
						<select class="form-control col-md-6" id="property-area" name="area" placeholder="Property Area">
							<option value="single-house">{{'South dale'}}</option>
							<option value="semi-detach">{{'Exeter'}}</option>
							<option value="town-house">{{'Boler'}}</option>
							<option value="apartment">{{'Spring bank'}}</option>
							<option value="room">{{'Riverside'}}</option>
							<option value="room">{{'Hamilton'}}</option>
							<option value="room">{{'Bradley'}}</option>
							<option value="room">{{'Huron'}}</option>
							<option value="room">{{'Sunning dale'}}</option>
							<option value="room">{{'Fanshawe park'}}</option>
						</select>
					</div>
					<div class="col-md-4">Property Area</div>
				</div>
				-->

			</div>
			<!--end of left-side -->

			<div class="form-right-side col-md-6">


				<div class="for-multiple">

					<!-- Living space -->
					<div class="row form-group">
						<div class="col-md-7">
							<input class="form-control" type="text" name="living-space"
								placeholder="Living space area" />
						</div>
						<div class="col-md-4">Living space area</div>
					</div>



					<!-- Rooms -->
					<div class="row form-group">
						<div class="col-md-7">
							<input class="form-control" id="rooms" type="text" name="nrooms"
								placeholder="Number of rooms" />
						</div>
						<div class="col-md-4">Number of rooms</div>
					</div>

					<!-- Baths -->
					<div class="row form-group">
						<div class="col-md-7">
							<input class="form-control" id="baths" type="text" name="nbaths"
								placeholder="Number of baths" />
						</div>
						<div class="col-md-4">Number of baths</div>
					</div>

				</div>
				<!-- end of for-multiple -->



				<div class="for-house">

					<!-- Garages -->
					<div class="row form-group">
						<div class="col-md-7">
							<input class="form-control" id="garages" type="text"
								name="ngarages" placeholder="Number of garages" />
						</div>
						<div class="col-md-4">Number of garages</div>
					</div>

					<!--Basement-->
					<div class="row form-group">
						<div class="col-md-7">
							<select class="form-control col-md-6" name="basement">
								<option value="0">{{"No Basement"}}</option>
								<option value="1">{{'Non furnished'}}</option>
								<option value="2">{{'Furnished'}}</option>
							</select>
						</div>
						<div class="col-md-4">Basement</div>
					</div>

					<!--Faces-->
					<div class="row form-group">
						<div class="col-md-7">
							<select class="form-control col-md-6" name="faces">
								<option value="0">{{"I don't know"}}</option>
								<option value="1">{{'North'}}</option>
								<option value="2">{{'South'}}</option>
								<option value="3">{{'West'}}</option>
								<option value="4">{{'East'}}</option>
								<option value="5">{{'North East'}}</option>
								<option value="6">{{'North West'}}</option>
								<option value="7">{{'South East'}}</option>
								<option value="8">{{'South West'}}</option>
							</select>
						</div>
						<div class="col-md-4">My garage faces</div>
					</div>


				</div>
				<!-- end for-house --->

				<div class="for-condo" style="display: none">

					<!-- Floor -->
					<div class="row form-group">
						<div class="col-md-7">
							<input class="form-control" type="text" name="floor"
								placeholder="Floor type" />
						</div>
						<div class="col-md-4">Hardwood, Ceramic, carpet...</div>
					</div>

					<!-- Parking -->
					<div class="row form-group">
						<div class="col-md-7">
							<select class="form-control col-md-6" name="parking">
								<option value="included">Included</option>
								<option value="charge">Need pay</option>
							</select>
						</div>
						<div class="col-md-4">Parking</div>
					</div>

					<!-- Laundry -->
					<div class="row form-group">
						<div class="col-md-7">
							<select class="form-control col-md-6" name="laundry">
								<option value="included">Included</option>
								<option value="charge">On site</option>
							</select>
						</div>
						<div class="col-md-4">Laundry</div>
					</div>

				</div>
				<!--end for condo-->


				<div class="for-rent" style="display: none">
					<!-- utilities -->
					<div class="row form-group">
						<div class="col-md-7">
							<select class="form-control col-md-6" name="utilities">
								<option value="included">Included</option>
								<option value="charge">Need pay</option>
							</select>
						</div>
						<div class="col-md-4">Hydro, heating</div>
					</div>

					<!-- Internate -->
					<div class="row form-group">
						<div class="col-md-7">
							<select class="form-control col-md-6" name="internate">
								<option value="included">Included</option>
								<option value="charge">Need pay</option>
							</select>
						</div>
						<div class="col-md-4">Internate</div>
					</div>

					<!-- Pets -->
					<div class="row form-group">
						<div class="col-md-7">
							<select class="form-control col-md-6" name="pets">
								<option value="friendly">Pets friendly</option>
								<option value="not-allowed">Not allowed</option>
							</select>
						</div>
						<div class="col-md-4">Pets</div>
					</div>

				</div>
				<!-- end for-rent --->


				<div class="for-house">
					<div class="row">
						<div class="col-md-3">
							<label class="checkbox"> <input type="checkbox"
								name="deck" />Deck
							</label>
						</div>
						<div class="col-md-3">
							<label class="checkbox"> <input type="checkbox"
								name="patio" />Patio
							</label>
						</div>
						<div class="col-md-3">
							<label class="checkbox"> <input type="checkbox"
								name="fence" />Fence
							</label>
						</div>
					</div>
				</div>
				<!-- end for-house --->

				<div class="for-room" style="display: none">
					<div class="row form-group">
						<div class="col-md-3">
							<label class="checkbox"> <input type="checkbox"
								name="meal" />Meal
							</label>
						</div>
					</div>
				</div>

				<div class="row form-group">
					<div class="col-md-3">
						<label class="checkbox"> <input type="checkbox" name="ac" />AC
						</label>
					</div>
				</div>

				<input name="action" style="display: none;" value='new' /> <input
					name="id" style="display: none;" />

			</div>
			<!--end of right-side -->

		</div>
		<!--end of page-1 -->



		<div id="additional-info" class="z-page" value="2"
			style="display: none;">
			<div class="z-title col-md-8">
				<h3>Step2: Advertisement Information</h3>
			</div>
			<div class="form-left-side col-md-8">

				<div class="row form-group">
					<div class="col-md-7">
						<select class="form-control col-md-6" name="ad-by">
							<option value="0">{{'Owner'}}</option>
							<option value="1">{{'Brooker'}}</option>
						</select>
					</div>
					<div class="col-md-4">Managed by</div>
				</div>


				<!-- Title -->
				<div class="row form-group">
					<div class="col-md-7">
						<input class="form-control" type="text" name="ad-title"
							placeholder="Property name" />
					</div>

					<div class="col-md-4">Enter a title</div>
				</div>

				<!-- Description -->
				<div class="row form-group">
					<div class="col-md-7">
						<textarea class="form-control" rows="5" name="ad-description"
							placeholder="Description"></textarea>
					</div>

					<div class="col-md-4">Enter your description</div>
				</div>

				<!-- Price -->
				<div class="row form-group">
					<div class="col-md-7">
						<input class="form-control" type="text" name="price"
							placeholder="Price" />
					</div>
					<div class="col-md-4">Enter the price</div>
				</div>

				<!--Prefer contact-->
				<div class="row form-group">
					<div class="col-md-7">
						<select class="form-control col-md-6" name="prefer-contact">
							<option value="0">{{"Email"}}</option>
							<option value="1">{{"Phone"}}</option>
							<option value="2">{{"Message"}}</option>
						</select>
					</div>
					<div class="col-md-4">Basement</div>
				</div>

				<!-- Email -->
				<div class="row form-group">
					<div class="col-md-7">
						<input class="form-control" id="price" type="text" name="email"
							placeholder="Email" />
					</div>
					<div class="col-md-4">Enter the email</div>
				</div>

				<!-- Phone -->
				<div class="row form-group">
					<div class="col-md-7">
						<input class="form-control" type="text" name="phone"
							placeholder="Phone" />
					</div>
					<div class="col-md-4">Phone number</div>
				</div>

				<div class="for-rent" style="display: none">

					<!-- Term -->
					<div class="row form-group">
						<div class="col-md-7">
							<input class="form-control" type="text" name="term"
								placeholder="Term" />
						</div>
						<div class="col-md-4">Months</div>
					</div>
				</div>

				<div class="row">
					<div class="col-md-7">
						<label class="checkbox"> <input type="checkbox"
							value="remeber-me">Show to everyone
						</label>
					</div>
				</div>

				<input name="action" style="display: none;" /> <input name="id"
					style="display: none;" />
			</div>
			<!--end of left-side -->

			<div class="form-right-side col-md-4">
				<div class="row form-group">
					<div class="col-md-8"></div>
					<div class="col-md-4"></div>
				</div>
			</div>
			<!--end of right-side -->
		</div>
		<!-- end of class="page-2" -->



		<div id="additional-info" class="z-page" value="3"
			style="display: none;">

			<div class="z-title col-md-8">
				<h3>Step3: Complete and Sumbmit</h3>
			</div>

			<div class="form-left-side col-md-8">

				<div class="row">
					<div class="col-md-9">

						<!-- Button trigger modal dialog-->
						<!--button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
					  Add pictures
					</button-->

						<ul id="image-loader" class="col-md-12">

							<!--li style="width: 100px; height: 100px;">
					<div class="z-thumbnail" style="width: 100px; height: 100px;">
						<input name="upload-image" class="z-upload-input" type="file" style="width: 90px; height: 90px; opacity:0;"/>
					</div>
			</li-->

						</ul>
					</div>
				</div>

				<input name="action" style="display: none;" /> <input name="id"
					style="display: none;" />
			</div>
			<!--end of left-side -->

			<div class="form-right-side col-md-3">
				<div class="row form-group">
					<div class="col-md-8">
						<div class="form-control col-md-8 thumbnail" id="property-picture"
							name="property-picture">
							<img id="image-preview" alt="300x200"
								style="width: 300px; height: 200px;" />
							<div class="caption">
								<p>
									<span class="btn btn-primary btn-file">Browse<input
										id="image-input" name="property-image" type="file"></span> <a
										id="image-del-btn" class="btn btn-primary">Delete</a>
								</p>
							</div>
						</div>
					</div>
					<div class="col-md-4"></div>
				</div>
			</div>
			<!--end of right-side -->
		</div>
		<!-- end of class="page-3" -->


		<div class="row" class="col-md-12">
			<div class="btn-toolbar col-md-7">
				<button type="button" value="prev"
					class="z-prev-btn btn btn-primary col-md-2">Previous</button>
				<button type="button" value="next"
					class="z-next-btn btn btn-primary col-md-2">Next</button>
				<button type="submit" value="submit"
					class="z-submit-btn submit btn btn-primary col-md-2">Submit</button>
			</div>
		</div>

	</form>
</div>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
	aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"
					aria-hidden="true">&times;</button>
				<h4 class="modal-title" id="myModalLabel">Modal title</h4>
			</div>
			<div class="modal-body"></div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
				<button type="button" class="btn btn-primary">Save changes</button>
			</div>
		</div>
		<!-- /.modal-content -->
	</div>
	<!-- /.modal-dialog -->
</div>
<!-- /.modal -->

{% endblock %}
